import React from "react";
import './index.css';
import "../../../../Common/css/common.css";
import Blank from "../../../../Component/Blank";
import WeChatShare from "../../../../Common/svg/WeChatShare/";
import PYQ from "../../../../Common/svg/PYQ/";
import QQ from "../../../../Common/svg/QQ/";
import QZone from "../../../../Common/svg/QZone/QZone";

export default class extends React.Component{
    
    constructor(props){
        super();
        let id=props.match.params.id;
        let price=props.match.params.price;
        let time=props.match.params.time;
        this.state={
            id,
            time
        }

    }
    render(){
        return(
            <div className="PaySuccess_Container">
                <div className="PaySuccess_Title">
                    <div>
                        <img src="/assets/study/paySuccess.png" alt="paySuccess"/>
                    </div>
                    <div>订单已支付成功</div>
                </div>
                <div>
                    <div className="flexContainer PaySuccess_ResultLine">
                        <span>订单金额</span>
                        <Blank/>
                        <span className="PaySuccess_ResultLineRight">￥1980</span>
                    </div>
                    <div className="flexContainer PaySuccess_ResultLine">
                        <span>订单编号</span>
                        <Blank/>
                        <span className="PaySuccess_ResultLineRight">{this.state.id}</span>
                    </div>
                    <div className="flexContainer PaySuccess_ResultLine">
                        <span>交易时间</span>
                        <Blank/>
                        <span className="PaySuccess_ResultLineRight">{this.state.time}</span>
                    </div>
                </div>
                <div>
                    <div className="flexContainer PaySuccess_ShareTitle">
                        <span className="PaySuccess_ShareTitleLine"></span><span className="PaySuccess_ShareTitleInfo">分享获取优惠券</span><span className="PaySuccess_ShareTitleLine"></span>
                    </div>
                    <div className="flexContainer PaySuccess_SVGContainer">
                        <span className="PaySuccess_SVG -mob-share-weixin">
                            <span className="PaySuccess_SVGTop"><WeChatShare/></span><span className="PaySuccess_SVGBottom">微信</span></span>
                        <span className="PaySuccess_SVG -mob-share-weixin">
                            <span className="PaySuccess_SVGTop"><PYQ/></span><span className="PaySuccess_SVGBottom">朋友圈</span></span>
                        <span className="PaySuccess_SVG -mob-share-qq">
                            <span className="PaySuccess_SVGTop"><QQ/></span><span className="PaySuccess_SVGBottom">QQ</span></span>
                        <span className="PaySuccess_SVG -mob-share-qzone">
                            <span className="PaySuccess_SVGTop"><QZone/></span><span className="PaySuccess_SVGBottom">QQ空间</span></span>
                    </div>
                </div>
            </div>
        )
    }
}